<template>
  <div class="page sign-page">
    <div class="content">
      <div ref="signWrap" class="sign-wrap">
        <canvas v-show="!disabled" ref="myCanvas" :width="width" :height="height"></canvas>
        <img v-show="disabled" :src="image" :width="width" :height="height"/>
      </div>
    </div>
    <div class="fix-btn">
      <a-button size="large" type="hollow" :disabled="disabled" class="hollow-primary-btn" @click="clearArea()">清除</a-button>
      <a-button size="large" type="primary" :disabled="disabled" @click="saveSign()">提交</a-button>
    </div>
  </div>
</template>
<script>
export default {
  name: 'SignPanel',
  props: {
    width: {
      type: String,
      default: '100%'
    },
    image: {
      type: String,
      default: ''
    },
    height: {
      type: String,
      default: '300'
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      mousePressed: false,
      c: "",
      ctx: "",
      lastX: 0,
      lastY: 0,
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.image = ""
      this.mousePressed = false
      var lastX, lastY
      this.c = this.$refs.myCanvas
      this.c.width = this.$refs.signWrap.clientWidth
      this.c.height = this.$refs.signWrap.clientHeight
      this.ctx = this.c.getContext("2d")
      this.init()
    })
  },
  methods: {
    init() {
      var that = this
      this.c.addEventListener(
        "touchstart",
        function (event) {
          if (event.targetTouches.length == 1) {
            event.preventDefault()
            var touch = event.targetTouches[0]
            this.mousePressed = true
            that.draw(
              touch.pageX - this.offsetLeft,
              touch.pageY - this.offsetTop,
              false
            )
          }
        },
        false
      )

      this.c.addEventListener(
        "touchmove",
        function (event) {
          if (event.targetTouches.length == 1) {
            event.preventDefault()
            var touch = event.targetTouches[0];
            if (this.mousePressed) {
              that.draw(
                touch.pageX - this.offsetLeft,
                touch.pageY - this.offsetTop,
                true
              )
            }
          }
        },
        false
      )

      this.c.addEventListener(
        "touchend",
        function (event) {
          if (event.targetTouches.length == 1) {
            event.preventDefault()
            this.mousePressed = false
          }
        },
        false
      )
      // 鼠标
      this.c.onmousedown = function (event) {
        this.mousePressed = true;
        that.draw(
          event.pageX - this.offsetLeft,
          event.pageY - this.offsetTop,
          false
        )
      }

      this.c.onmousemove = function (event) {
        if (this.mousePressed) {
          that.draw(
            event.pageX - this.offsetLeft,
            event.pageY - this.offsetTop,
            true
          )
        }
      }

      this.c.onmouseup = function (event) {
        this.mousePressed = false
      }
    },
    draw(x, y, isDown) {
      if (isDown) {
        this.ctx.beginPath()
        this.ctx.strokeStyle = "#000" //颜色
        this.ctx.lineWidth = 3 //线宽
        this.ctx.lineJoin = "round"
        this.ctx.lineMax = 10 //设置画笔最大线宽
        this.ctx.lineMin = 3 //设置画笔最小线宽
        this.ctx.linePressure = 1.2 //设置画笔笔触压力
        this.ctx.smoothness = 30 //设置画笔笔触大小变化的平滑度。
        this.ctx.moveTo(this.lastX, this.lastY)
        this.ctx.lineTo(x, y)
        this.ctx.closePath()
        this.ctx.stroke()
      }
      this.lastX = x
      this.lastY = y
    },
    clearArea() {
      this.ctx.setTransform(1, 0, 0, 1, 0, 0)
      this.ctx.clearRect(0, 0, this.ctx.canvas.width, this.ctx.canvas.height)
    },
    saveSign() {
      var c = this.$refs.myCanvas
      if (!this.isCanvasBlank(c)) {
        this.image = c.toDataURL("image/png")
        this.$emit("ok", this.image)
      }
    },
    isCanvasBlank(canvas) {
      var blank = document.createElement("canvas")
      blank.width = canvas.width
      blank.height = canvas.height
      return canvas.toDataURL() == blank.toDataURL()
    },
  },
};
</script>
<style lang="less" scoped >
.page {
  height: 100%;
}

.sign-page .content {
  padding: 0.3rem;
  font-size: 14px;
  height: 100%;
  color: #666;
}

.sign-wrap {
  margin-top: 0.3rem;
  width: 100%;
  height: 70%;
  border: 1px dashed #999;
}

.fix-btn {
  text-align: center;
  .hollow-primary-btn {
    margin-right: 10px;
  }
}

#myCanvas {
  color: #ff6000;
  background-color: #ffffff;
}
</style>
